import { sjkm, sjxg } from '@/services';
import ProList from '@ant-design/pro-list';
import { Button, Form, Input, message, Modal, Space, Typography } from 'antd';
import { useEffect, useState } from 'react';
import { useLocation, useParams } from 'umi';

const obj: Record<number, string> = {
  1: '资产负债表',
  2: '利润表',
  3: '现金流量表',
};
const Render = ({
  value,
  canCalc,
  handleDel,
  handleEdit,
}: {
  value: string;
  canCalc: boolean;
  handleDel: (id: string) => void;
  handleEdit: (values: any) => void;
}) => {
  const [form] = Form.useForm();

  const edit = async () => {
    const values = await form.validateFields();
    handleEdit(values);
  };

  return (
    <Space>
      {canCalc && (
        <Form layout="inline" form={form} initialValues={{ value }}>
          <Form.Item name="value" label="数值">
            <Input />
          </Form.Item>
        </Form>
      )}
      {canCalc && <a onClick={edit}>保存</a>}
    </Space>
  );
};

export default () => {
  const [current, setCurrent] = useState<number>(1);
  const params = useParams<{ id: string }>();
  const location = useLocation() as unknown as {
    query: { canCalc: '0' | '1' };
  };
  const query = location.query;
  const [dataSource, setDataSource] = useState<any[]>();

  useEffect(() => {
    getData();
  }, [current]);

  const getData = async () => {
    const data = await sjkm({ time: params.id, y: current as 1 | 2 | 3 });
    if (data.msg === '失败') return  message.error(data.content);
    setDataSource(data.content);
  };

  const handleDel = async (id: string) => {
    console.log(id);
  };

  const handleEdit = async (record: any, values: any) => {
    const data = await sjxg({
      time: params.id,
      km: record.km,
      value: values.value,
    });
    if (data.msg === '失败') {
      message.error(data.content);
    } else {
      message.success('修改成功');
      getData();
    }
  };

  return (
    <div style={{ display: 'flex', height: '100%' }}>
      <div
        style={{
          width: '100%',
          height: '100%',
          marginRight: '8px',
          background: '#fff',
        }}
      >
        <div style={{ textAlign: 'center' }}>
          <Typography.Title level={2} style={{ color: '#1890ff' }}>
            {obj[current]}
          </Typography.Title>
        </div>
        <ProList
          pagination={{
            current: current,
            defaultPageSize: 10000,
            pageSizeOptions: [10000],
            showSizeChanger: false,
            total: 29999,
            onChange: (p) => setCurrent(p),
            showTotal: (total, range) => `第${current}页，共3页`,
            //@ts-ignore
            position: 'top',
          }}
          defaultSize="small"
          rowKey="id"
          dataSource={dataSource}
          showActions="always"
          metas={{
            title: {
              dataIndex: 'km',
            },
            actions: {
              render: (_, record) => {
                console.log(record)
                return (
                  <Render
                    key={Math.random().toString()}
                    handleDel={handleDel}
                    handleEdit={(value) => handleEdit(record, value)}
                    canCalc={query.canCalc === '0'}
                    value={record.value}
                  />
                )
              },
            },
          }}
        />
      </div>
    </div>
  );
};
